<template>
  <div id="app">
    <div class="todo-container">
      <h1>待办事项</h1>
      <div class="input-section">
        <input 
          v-model="newTodo" 
          @keyup.enter="addTodo" 
          placeholder="Enter an activity.."
          class="todo-input"
          id="item"
        />
        <button @click="addTodo" class="add-button">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
            <g>
              <path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/>
            </g>
          </svg>
        </button>
      </div>

      <div class="todo-sections">
        <!-- 未完成事项 -->
        <ul class="todo-list" id="todo">
          <li v-for="todo in incompleteTodos" :key="todo.id" class="todo-item">
            <span class="todo-text">{{ todo.text }}</span>
            <div class="buttons">
              <button @click="completeTodo(todo.id)" class="complete-btn">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
                  <rect y="0" class="noFill" width="22" height="22"/>
                  <g>
                    <path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/>
                  </g>
                </svg>
              </button>
              <button @click="removeTodo(todo.id)" class="remove-btn">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
                  <rect class="noFill" width="22" height="22"/>
                  <g>
                    <g>
                      <path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/>
                    </g>
                    <g>
                      <g>
                        <path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/>
                      </g>
                      <g>
                        <path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/>
                      </g>
                      <g>
                        <path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/>
                      </g>
                    </g>
                  </g>
                </svg>
              </button>
            </div>
          </li>
          <div v-if="incompleteTodos.length === 0" class="empty-message">You have nothing to-do!</div>
        </ul>

        <!-- 已完成事项 -->
        <ul class="todo-list" id="completed">
          <li v-for="todo in completedTodos" :key="todo.id" class="todo-item completed">
            <span class="todo-text">{{ todo.text }}</span>
            <div class="buttons">
              <button @click="uncompleteTodo(todo.id)" class="complete-btn">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
                  <rect y="0" class="noFill" width="22" height="22"/>
                  <g>
                    <path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/>
                  </g>
                </svg>
              </button>
              <button @click="removeTodo(todo.id)" class="remove-btn">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
                  <rect class="noFill" width="22" height="22"/>
                  <g>
                    <g>
                      <path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/>
                    </g>
                    <g>
                      <g>
                        <path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/>
                      </g>
                      <g>
                        <path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/>
                      </g>
                      <g>
                        <path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/>
                      </g>
                    </g>
                  </g>
                </svg>
              </button>
            </div>
          </li>
          <div v-if="completedTodos.length === 0" class="empty-message">You have yet to complete any tasks.</div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Ref, ComputedRef } from 'vue'
import { ref, computed, onMounted } from 'vue'

interface Todo {
  id: number
  text: string
  completed: boolean
}

const newTodo = ref('')
const todos = ref<Todo[]>([])

// 从localStorage加载数据
const loadFromLocalStorage = () => {
  const savedTodos = localStorage.getItem('todoList')
  if (savedTodos) {
    const data = JSON.parse(savedTodos)
    todos.value = [...data.todo.map((text: string, index: number) => ({
      id: index + 1,
      text,
      completed: false
    })), ...data.completed.map((text: string, index: number) => ({
      id: index + 10000,
      text,
      completed: true
    }))]
  }
}

// 保存到localStorage
const saveToLocalStorage = () => {
  const data = {
    todo: todos.value.filter(t => !t.completed).map(t => t.text),
    completed: todos.value.filter(t => t.completed).map(t => t.text)
  }
  localStorage.setItem('todoList', JSON.stringify(data))
}

const incompleteTodos = computed(() => {
  return todos.value.filter(todo => !todo.completed)
})

const completedTodos = computed(() => {
  return todos.value.filter(todo => todo.completed)
})

const addTodo = () => {
  if (newTodo.value.trim() === '') return
  
  todos.value.push({
    id: Date.now(),
    text: newTodo.value.trim(),
    completed: false
  })
  
  alert("任务已添加: " + newTodo.value.trim())
  newTodo.value = ''
  saveToLocalStorage()
}

const completeTodo = (id: number) => {
  const todo = todos.value.find(todo => todo.id === id)
  if (todo) {
    todo.completed = true
    saveToLocalStorage()
  }
}

const uncompleteTodo = (id: number) => {
  const todo = todos.value.find(todo => todo.id === id)
  if (todo) {
    todo.completed = false
    saveToLocalStorage()
  }
}

const removeTodo = (id: number) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
  saveToLocalStorage()
}

// 组件挂载时加载数据
onMounted(() => {
  loadFromLocalStorage()
})
</script>

<style scoped>
#app {
  background-color: #edf0f1;
  min-height: 100vh;
  padding: 80px 0 0 0;
  font-family: 'Roboto', sans-serif;
}

.todo-container {
  width: 100%;
  padding: 15px;
}

h1 {
  display: none;
}

.input-section {
  width: 100%;
  height: 80px;
  position: fixed;
  padding: 15px;
  top: 0;
  left: 0;
  z-index: 5;
  background: #25b99a;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.todo-input {
  width: 100%;
  height: 50px;
  float: left;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  text-indent: 18px;
  padding: 0 60px 0 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px 25px 25px 5px;
  border: 0px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.todo-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.add-button {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  border-radius: 25px;
  background: #fff;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.add-button svg {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
}

.add-button svg .fill {
  fill: #25b99a;
}

.todo-sections {
  width: 100%;
  float: left;
  padding: 15px;
}

.todo-list {
  width: 100%;
  float: left;
}

.todo-item {
  width: 100%;
  min-height: 50px;
  float: left;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  line-height: 22px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 2px rgba(44, 62, 80, 0.10);
  margin: 0 0 10px 0;
  padding: 14px 100px 14px 14px;
  word-break: break-word;
}

.todo-item:last-of-type {
  margin: 0;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #888;
}

.todo-text {
  flex: 1;
}

.buttons {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

.complete-btn, .remove-btn {
  width: 50px;
  height: 50px;
  float: left;
  background: none;
  position: relative;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.remove-btn:before {
  content: '';
  width: 1px;
  height: 30px;
  background: #edf0f1;
  position: absolute;
  top: 10px;
  left: 0;
}

.complete-btn svg, .remove-btn svg {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -11px 0 0 -11px;
}

.complete-btn svg {
  border-radius: 11px;
  border: 1.5px solid #25b99a;
  transition: background 0.2s ease;
}

#completed .complete-btn svg {
  background: #25b99a;
  border: 0px;
}

#todo .complete-btn:hover svg {
  background: rgba(37, 185, 154, 0.75);
}

#todo .complete-btn:hover svg .fill {
  fill: #fff;
}

#completed .complete-btn svg .fill {
  fill: #fff;
}

.remove-btn svg .fill {
  fill: #c0cecb;
  transition: fill 0.2s ease;
}

.remove-btn:hover svg .fill {
  fill: #e85656;
}

.complete-btn svg .fill {
  fill: #25b99a;
}

#completed {
  position: relative;
  padding: 60px 0 0 0;
}

#completed:before {
  content: '';
  width: 150px;
  height: 1px;
  background: #d8e5e0;
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0 0 0 -75px;
}

.empty-message {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin: 15px 0 0 0;
}

.noFill {
  fill: none;
}
</style>